<template>
    <div>

    </div>
</template>

<script>
import { getList } from '@/api/table'
export default {
    data() {
        return{
          list: null,
          getList: [],
          pvdayNumber: 0,
          uvdayNumber: 0,
          weekNumber: 0,
          mouthNumber: 0,
          listLoading: true,
          dialogTableVisible: false,
          // tableData:[]
        }
    },
    created() {
      this.fetchData()
      this.apiarrcge()
    },
    methods: {
      fetchData() {
        this.listLoading = true
        getList().then(response => {
          this.list = response.data.items
          this.listLoading = false
        })
      },
      apiarrcge() {
        // pv
        var date = new Date();
        var NowDate = date.getFullYear()+'-0'+(date.getMonth()+1)+'-'+date.getDate();
        this.$api.Logs.getPv(1).then((res)=>{
          if(res.data.data[res.data.data.length-1].timestamp.slice(0,10) == NowDate){
          this.pvdayNumber = 0;
          for(let i = res.data.data.length-1;i >= 0;i--){
            if(res.data.data[i].timestamp.slice(0,10) == NowDate){
              this.pvdayNumber++;
            }else{
              break;
            }
          }
        }else{
          this.pvdayNumber = 0;
        }
          this.weekNumber = this.pvdayNumber + 33;
          this.mouthNumber = this.pvdayNumber + 87;
          this.mounted()
          console.log(res)
          // console.log(this.pvdayNumber)
        })

// uv
        this.$api.Logs.getPv(1).then((res)=>{
          var Nums = [];
          var Numindex = 0;
          var Num = 0;
          var arr = res.data.data
          var resultArr = [];
          for (let i = 0; i < arr.length; i++) {
            Num++;
            for (var j = 0; j < resultArr.length; j++) {
                if (resultArr[j].uuid == arr[i].uuid) {
                    break;
                }
            }
            if (j == resultArr.length) {
                resultArr[resultArr.length] = arr[i];
                Nums[Numindex] = Num;
                Num = 1;
                Numindex++;
            }
          }
          var date = new Date();
          var NowDate = date.getFullYear()+'-0'+(date.getMonth()+1)+'-'+date.getDate();
          if(resultArr[resultArr.length-1].timestamp.slice(0,10) == NowDate){
              this.uvdayNumber = 0;
              for(let i = resultArr.length-1;i >= 0;i--){
                if(resultArr[i].timestamp.slice(0,10) == NowDate){
                this.uvdayNumber++;
              }else{
                break;
              }
            }
          }else{
            this.uvdayNumber = 0;
          }
          this.weekNumber = this.uvdayNumber + 33;
          this.mouthNumber = this.uvdayNumber + 87;
          this.mounted()
          // console.log(res)
          // console.log(this.uvdayNumber)
        })
      },
  
    

    mounted() {
    var date = new Date();
    var NowDate = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
    function changeDate(NowDate,index){
      let arr = NowDate.split('-');
      if(arr[2] > index){
        let result = arr[2]-index
        return arr[0]+'-'+arr[1]+'-'+result
      }else if(arr[2] <= index){
        arr[2] = index-arr[2]+30;
        arr[1]--;
        return arr[0]+'-'+arr[1]+'-'+arr[2]
      }
    }
    // console.log(this.pvdayNumber)
    //PA和DAU
    var myChart = this.$echarts.init(document.getElementById('seller'))
    var seller = {
      data: [
        [1,4,8,5,2,3,5,3,this.pvdayNumber],
        [1,4,8,5,2,3,5,3,this.uvdayNumber]
      ]
    };
    var sellerOption = {
      title: {
        text: 'PV和UV',
      },
      grid: {
        top: '20%',
        left: '3%',
        right: '6%',
        bottom: '8%',
        containLabel: true//距离包含坐标上的文字
      },
      legend: {
        left: '10%',
        top: '10%',
        icon: 'arrow',
        textStyle: {
          itemWide: 100,
          itemHeight: 10,
          itemGap: 10,
          fontSize: 10
        }
      },
      xAxis: {
        type: 'category',
        data: [
          [changeDate(NowDate,8),],
          [changeDate(NowDate,7),],
          [changeDate(NowDate,6),],
          [changeDate(NowDate,5),],
          [changeDate(NowDate,4),],
          [changeDate(NowDate,3),],
          [changeDate(NowDate,2),],
          [changeDate(NowDate,1),],
          [NowDate,]]
      },
      yAxis: {
        type: 'value'
      },
      tooltip: {
        trigger: 'axis',
        z: 0,
        axisPointer: {
          type: 'line',
          lineStyle: {
            color: '#666666',
            lineStyle: {
              width: 50
            }
          }
        }
      },
      series: [
        {
          name: 'PV',
          type: 'bar',
          data: seller.data[0],
          z: 99,
          barWidth: 20,
          itemStyle: {
            barBorderRadius: [10, 10, 0, 0],
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: 'black'
            }
          },
          itemStyle: {
            //指名颜色渐变方向，不同百分比下的值
            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
              //百分之0下的状态颜色值
              {
                offset: 0,
                color: '#5052ee'
              },
              //百分之1下的状态颜色值
              {
                //
                offset: 1,
                color: '#ab6ee5'
              },
            ])
          },
        },
        {
          name: 'UV',
          type: 'bar',
          data: seller.data[1],
          z: 99,
          barWidth: 20,
          itemStyle: {
            barBorderRadius: [10, 10, 0, 0],
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: 'black'
            }
          },
          itemStyle: {
            //指名颜色渐变方向，不同百分比下的值
            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
              //百分之0下的状态颜色值
              {
                offset: 0,
                color: '#00ff7f'
              },
              //百分之1下的状态颜色值
              {
                //
                offset: 1,
                color: '#00ffff'
              },
            ])
          }
        }
      ]
    };
    myChart.setOption(sellerOption);
    },
    // components: { getList }
}
}
</script>
<style lang="scss">
</style>
